<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 100px auto;
            background: black;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            /*align-items: center;*/
        }
        
        main {
            width: 400px;
            height: 400px;
            /*border: 1px solid white;*/
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
        }
        
        div {
            width: 100%;
            height: 100%;
            border: 1px solid red;
            /*box-sizing: border-box;*/
            position: absolute;
            color: white;
            opacity: 0.5;
        }
        
        .qian {
            transform: translateZ(200px);
            background: red;
        }
        
        .hou {
            transform: translateZ(-200px);
            background: orange;
        }
        
        .zuo {
            transform: rotateY(90deg) translateZ(200px);
            background: yellow;
        }
        
        .you {
            transform: rotateY(90deg) translateZ(-200px);
            background: green;
        }
        
        .shang {
            transform: rotateX(90deg) translateZ(-200px);
            background: blue;
        }
        
        .xia {
            transform: rotateX(90deg) translateZ(200px);
            background: purple;
        }
        
        @keyframes spin {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>

</head>

<body>
    <main>
        <div class="qian">前</div>
        <div class="hou">后</div>
        <div class="zuo">左</div>
        <div class="you">右</div>
        <div class="shang">上</div>
        <div class="xia">下</div>
    </main>
</body>

</html>